html.theme-orange {
  /* 主色调 */
  --el-color-primary: #f97316;
  --el-color-primary-light-3: #fb923c;
  --el-color-primary-light-9: #fff7ed;
  --el-color-primary-dark-2: #ea580c;

  /* 功能色 */
  --el-color-success: #22c55e;
  --el-color-warning: #eab308;
  --el-color-danger: #ef4444;
  --el-color-info: #6b7280;

  /* 中性色 */
  --el-bg-color: #ffffff;
  --el-bg-color-page: #fff7ed;
  --el-text-color-primary: #7c2d12;
  --el-text-color-regular: #9a3412;
  --el-border-color: #fed7aa;
  
  /* 应用特定变量 */
  --app-sidebar-bg: #e65100;
  --app-sidebar-text: #ffffff;
  --app-sidebar-active-bg: #ef6c00;
  --app-sidebar-active-text: #ffffff;
  --app-sidebar-hover-bg: #ef6c00;
  --app-sidebar-border: #e65100;
  --app-header-bg: #ef6c00;
  --app-header-text: #ffffff;
  --app-header-hover-bg: #e65100;
  --app-main-bg: #fff7ed;
  --app-sidebar-width: 220px;
  --app-header-height: 60px;
}

/* 组件样式覆盖 */
html.theme-orange .el-menu {
  --el-menu-bg-color: var(--app-sidebar-bg);
  --el-menu-text-color: #fed7aa;
  --el-menu-hover-bg-color: #9a3412;
  --el-menu-active-color: #ffffff;
  --el-menu-active-bg-color: var(--el-color-primary);
  border-right: none;
}

html.theme-orange .el-menu-item.is-active {
  background-color: var(--el-menu-active-bg-color);
  font-weight: 500;
}

html.theme-orange .el-sub-menu.is-active .el-sub-menu__title {
  color: #ffffff;
}

html.theme-orange .el-menu-item:hover, 
html.theme-orange .el-sub-menu__title:hover {
  background-color: var(--el-menu-hover-bg-color);
}

html.theme-orange .el-button--primary {
  --el-button-bg-color: var(--el-color-primary);
  --el-button-border-color: var(--el-color-primary);
  --el-button-hover-bg-color: #ea580c;
  --el-button-hover-border-color: #ea580c;
  --el-button-active-bg-color: #c2410c;
  --el-button-active-border-color: #c2410c;
}

/* 布局组件样式 */
html.theme-orange .el-header {
  background-color: var(--app-header-bg);
  border-bottom: none;
  color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* 侧边栏样式优化 */
html.theme-orange .el-aside {
  background-color: var(--app-sidebar-bg);
  transition: width 0.3s;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 主内容区域 */
html.theme-orange .el-main {
  background-color: var(--app-main-bg);
}
